<!-- 宠物模块入口 -->
<template>
  <div id="user-pet">
    <div class="slider">
      <pet-show-slot class="slider-item"
      @petInfoPage="petInfoPage"></pet-show-slot>
      <!-- <pet-show-slot class="slider-item"></pet-show-slot> -->
    </div>

    <pet-all-info v-if="petAllShow"
    @petAllInfoOut="petAllInfoOut"></pet-all-info>
    
  </div>
</template>

<script>
import PetShowSlot from "./PetShowSlot";
import PetAllInfo from "./PetAllInfo.vue"

export default {
  name: "UserPet",
  components: {
    PetShowSlot,
    PetAllInfo
  },
  data() {
    return {
      petAllShow:false
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  methods:{
    petInfoPage(){
      this.petAllShow = !this.petAllShow
    },
    petAllInfoOut(){
      this.petAllShow = !this.petAllShow
    }
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>

<style scoped>
/* #user-pet {
  width: 100%;
  position: relative;
} 
.slider-item{
      width:100%;
      position:absolute;
      background-size:100%;
}
*/

</style>